<template>
  <view class="container">
    <view v-if="datSource.length">
      <view v-for="item in datSource" :key="item.id" class="card-wrap" @click.stop="linkToGoodsSourceDetail(item.id)">
        <view>{{item.goodsSourceName}}</view>
        <view class="global-card-linear-bg content">
          <view class="flex">
            <view class="icon global-button-bg">装</view>
            <view>
              <view class="name">{{item.loadingPlaceName || ''}}</view>
              <view class="address">{{item.address || ''}}</view>
            </view>
          </view>
          <view class="flex">
            <view class="icon orange-bg">卸</view>
            <view>
              <view class="name">{{item.unloadingPlaceName || ''}}</view>
              <view class="address">{{item.unloadingPlaceAddress || ''}}</view>
            </view>
          </view>
          <view class="other flex">
            <view>
              <view>煤种：{{item.productName || ''}}</view>
              <view>备注：{{item.remark || ''}}</view>
            </view>
            <view class="ml-10"><text>{{item.freight || 0}}</text>元/吨</view>
          </view>
        </view>
        <view class="footer">
          <button class="out-button" type="primary" plain @click.stop="openCallBook">电话咨询</button>
        </view>
      </view>
    </view>
    <view v-else class="no-data">没有更多数据了</view>
  </view>
</template>
<script>
  import { toast } from '@/utils/common';
  import { getDictDatas } from '@/api/me.js';
  import { getTenantId } from '@/utils/auth';
  import { getPageForDriver, getGoodsSource } from '@/api/system/goodsSource.js'
  export default {
    data() {
      return {
        datSource: [],
        isMore: 'more',
        phoneNum: undefined,
        queryParam: {
          pageNo: 1,
          pageSize: 10,
          longitude: undefined,
          latitude: undefined
        }
      }
    },
    onLoad() {
      // this.getLocations()
    },
    async onShow() {
      await this.getDictDatas()
      this.datSource = []
      this.queryParam.pageNo = 1
      if (getTenantId()) {
        setTimeout(() => {
          this.getList()
        }, 1000)
      }
    },
    onPullDownRefresh() {
      this.isMore = 'more';
      this.datSource = []
      this.queryParam.pageNo = 1;
      if (getTenantId()) {
        this.getList()
      }
    },
    onReachBottom() {
      if (this.isMore == 'more') {
        if (getTenantId()) {
          this.queryParam.pageNo++;
          this.getList();
        }
      }
    },
    methods: {
      getLocations() {
        uni.getLocation({
          type: 'gcj02',
          geocode: true,
          isHighAccuracy: true,
          highAccuracyExpireTime: 3000,
          success: (res) => {
            this.queryParam.longitude = res.longitude;
            this.queryParam.latitude = res.latitude;
          }
        });
      },
      async getList() {
        const res = await getPageForDriver(this.queryParam);
        if (res.code == 0) {
          const total = res.data.total || 0;
          const result = res.data.list || [];
          this.datSource = [...this.datSource, ...result];
          if (total == this.datSource.length) {
            this.isMore = 'noMore';
          } else {
            this.isMore = 'more';
          }
        } else {
          toast(res.msg);
        }
        wx.hideNavigationBarLoading();
        wx.stopPullDownRefresh();
      },
      async linkToGoodsSourceDetail(id) {
        const res = await getGoodsSource({ id })
        if (res.code !== 0) {
          toast(res.msg)
          return
        }
        this.$tab.navigateTo(`/packageA/pages/sourceDetail/index?id=${id}`);
      },
      openCallBook() {
        uni.makePhoneCall({
          phoneNumber: this.phoneNum
        });
      },
      async getDictDatas() {
        const res = await getDictDatas();
        if (res.code === 0) {
          this.phoneNum = (res.data || []).filter(
            (e) => e.dictType === 'contact_number'
          )[0]?.label;
        }
      },
    }
  }
</script>
<style lang="scss" scoped>
  .container {
    padding: 20rpx;
    font-size: 26rpx;

    .card-wrap+.card-wrap {
      margin-top: 20rpx;
    }

    .card-wrap {
      position: relative;
      padding: 20rpx;
      border-radius: 8rpx;
      background-color: #ffffff;
    }

    .content {
      margin-top: 12rpx;
      border-radius: 8rpx;
      padding: 16rpx 20rpx 20rpx 20rpx;
    }

    .flex {
      display: flex;

      .name {
        height: 48rpx;
        font-size: 30rpx;
        font-weight: 500;
        width: 560rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .address {
        height: 38rpx;
        font-size: 26rpx;
        color: #666666;
        width: 560rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

    .flex+.flex {
      margin-top: 20rpx;
    }

    .orange-bg {
      background-color: #F78600;
    }

    .icon {
      height: 48rpx;
      line-height: 48rpx;
      font-size: 28rpx;
      padding: 0 10rpx;
      color: #ffffff;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }

    .other {
      margin-top: 20rpx;
      font-size: 28rpx;
      color: #666666;
      align-items: flex-end;
      justify-content: space-between;

      text {
        color: #ff4d4f;
        font-size: 48rpx;
        font-weight: 600;
      }

      .ml-10 {
        margin-left: 20rpx;
        flex-shrink: 0;
      }
    }

    .footer {
      border-top: 1px solid #F1F2F5;
      padding-top: 20rpx;
    }
  }

  .no-data {
    padding: 30rpx;
    text-align: center;
    color: #777777;
  }
</style>